<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Custom Effects Demo</title>
    <link rel="stylesheet" type="text/css" href="../styles/core.css">
    <style type="text/css">
      div.module { width: 440px; }
    </style>
    <script type="text/javascript" src="../scripts/jquery-1.4.js"></script>
    <script type="text/javascript" src="../scripts/jqia2.support.js"></script>
    <script type="text/javascript">
      $(function(){

        $('#scaleButton').click(function(){
          $('#testSubject').each(function(){
            $(this).animate(
              {
                width: $(this).width() * 2,
                height: $(this).height() * 2
              },
              'slow'
            );
          });
        });

        $('#dropButton').click(function(){
          $('#testSubject').each(function(){
            $(this)
              .css('position','relative')
              .animate({
                  opacity: 'hide',
                  top: $(window).height() - $(this).height() -
                       $(this).position().top
                },
                'slow');
          });
        });

        $('#puffButton').click(function(){
          $('#testSubject').each(function(){
            var position = $(this).position();
            $(this)
              .css({position:'absolute',top:position.top,
                    left:position.left})
              .animate(
                {
                  opacity: 'hide',
                  width: $(this).width() * 5,
                  height: $(this).height() * 5,
                  top: position.top - ($(this).height() * 5 / 2),
                  left: position.left - ($(this).width() * 5 / 2)
                },
                'normal');
          });
        });

        $('#restoreButton').click(function(){
          $('#testSubject')
            .css({
              width: 'auto',
              height: 'auto',
              top: 'auto',
              left: 'auto',
              opacity: 1.0,
              position: 'static'
            })
            .show();
        });

      });
    </script>
  </head>

  <body>

    <h1>Custom Effects Demo</h1>

    <div data-module="Testing Panel">

      <style>
        #testSubject,#buttonBar { float: left; }
        #buttonBar { width: 108px; margin-left: 16px; }
        #restoreButton { margin-top: 22px; }
      </style>

      <img id="testSubject" src="limes.png"/>

      <div id="buttonBar">
        <button type="button" class="green90x24" id="scaleButton">Scale</button>
        <button type="button" class="green90x24" id="dropButton">Drop</button>
        <button type="button" class="green90x24" id="puffButton">Puff</button>
        <button type="button" class="green90x24" id="restoreButton">Restore</button>
      </div>

      <div class="separator"></div>

    </div>

  </body>
</html>
